<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>商品添加页面</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <!-- jQuery 文件。务必在bootstrap.min.js 之前引入 -->
</head>
<body>
<div class="container">
    <h1>商品添加页面</h1>
    <form th:action="@{addProducts}" method="post">
        <div class="form-group">
            <label for="name">名称:</label>
            <input th:value="${product.name}" type="text" id="name" name="name" placeholder="请输入名称">
        </div>
        <div class="form-group">
            <label for="price">价格:</label>
            <input th:value="${product.price}" type="text" id="price" name="price" placeholder="请输入价格">
        </div>
        <div class="form-group">
            <label for="description">描述:</label>
            <textarea th:value="${product.description}" id="description" name="description" placeholder="请输入描述"></textarea>
        </div>
        <div class="upload-container form-group">
            <h2>文件上传</h2>
            <input type="file" id="fileInput" name="file" accept=".txt, .pdf, .docx, .jpg, .png" onchange="previewFile()">
            <label id="uploadStatus"></label>
            <img id="preview" src="" alt="Image preview" style="max-width: 60%; height: auto; display: none;">
        </div>
        <!-- 提交按钮 -->
        <button type="submit" class="btn-primary" onclick="uploadFile()">添加商品</button>
    </form>
</div>
<script>
    function uploadFile() {
        const fileInput = document.getElementById('fileInput');
        const file = fileInput.files[0];
        const formData = new FormData();
        formData.append('file', file);
        const uploadStatus = document.getElementById('uploadStatus');
        uploadStatus.textContent = '正在上传...';
        fetch('http://localhost:8080/fileInfo/upload', {
            method: 'POST',
            body: formData
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok.');
                }
                return response.text();
            })
            .then(data => {
                uploadStatus.textContent = '上传成功';
                // 处理返回的数据（如果需要）
            })
            .catch(error => {
                uploadStatus.textContent = '上传失败';
                console.error('Error:', error);
            });
    }
    function previewFile() {
        const file = document.getElementById('fileInput').files[0];
        const preview = document.getElementById('preview');
        if (file) {
            const reader = new FileReader();
            reader.onload = function (e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
            };
            reader.readAsDataURL(file);
        }
    }
</script>
</body>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
    }

    .upload-button {
        margin-top: 20px;
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
    }
    .upload-button:hover {
        background-color: #45a049;
    }

    .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    h1 {
        text-align: center;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
    }

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .form-group textarea {
        height: 100px;
        resize: vertical;
    }

    .btn-primary {
        display: block;
        width: 100%;
        padding: 10px;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    .btn-primary:hover {
        background-color: #0056b3;
    }
</style>

</html>